<template>
  <div class="kawaii-create-center">
    <!-- 背景动画元素 -->
    <div class="animated-background">
      <div class="floating-bubble" v-for="n in 15" :key="n"></div>
    </div>

    <div class="kawaii-header">
      <h1 class="cute-title">✨ 创作中心 ✨</h1>
    </div>

    <div class="kawaii-content">
      <!-- 导航栏 -->
      <div class="kawaii-nav">
        <div class="nav-section">
          <div
            class="nav-item"
            :class="{ active: currentNav === 'dashboard' }"
            @click="changeNavTo('dashboard')"
          >
            <div class="nav-icon">📊</div>
            <div class="nav-text">数据概览</div>
          </div>
          <div
            class="nav-item"
            :class="{ active: currentNav === 'upload' }"
            @click="changeNavTo('upload')"
          >
            <div class="nav-icon">📤</div>
            <div class="nav-text">投稿视频</div>
          </div>
          <div
            class="nav-item"
            :class="{ active: currentNav === 'content' }"
            @click="changeNavTo('content')"
          >
            <div class="nav-icon">🎬</div>
            <div class="nav-text">内容管理</div>
          </div>
          <div
            class="nav-item"
            :class="{ active: currentNav === 'comment' }"
            @click="changeNavTo('comment')"
          >
            <div class="nav-icon">💬</div>
            <div class="nav-text">评论管理</div>
          </div>
        </div>
      </div>

      <!-- 主内容区 -->
      <div class="kawaii-main">
        <!-- 数据概览页面 - 只在路径为/front/create且没有子路由时显示 -->
        <div
          class="dashboard-page"
          v-if="currentNav === 'dashboard' && route.path === '/front/create'"
        >
          <div class="data-cards">
            <div class="kawaii-card">
              <div class="card-header">
                <div class="card-icon fans-icon">👥</div>
                <div class="data-info">
                  <div class="data-value">{{ animeData.fans }}</div>
                  <div class="data-label">粉丝数</div>
                </div>
                <div class="data-value-right">
                  <span class="data-change">+{{ animeData.fansIncrease }}</span>
                </div>
              </div>
            </div>

            <div class="kawaii-card">
              <div class="card-header">
                <div class="card-icon plays-icon">▶️</div>
                <div class="data-info">
                  <div class="data-value">{{ animeData.plays }}</div>
                  <div class="data-label">总播放量</div>
                </div>
                <div class="data-value-right">
                  <span class="data-change">
                    +{{ animeData.playsIncrease }}
                  </span>
                </div>
              </div>
            </div>

            <div class="kawaii-card">
              <div class="card-header">
                <div class="card-icon comments-icon">💭</div>
                <div class="data-info">
                  <div class="data-value">{{ animeData.comments }}</div>
                  <div class="data-label">总评论数</div>
                </div>
                <div class="data-value-right">
                  <span class="data-change">
                    +{{ animeData.commentsIncrease }}
                  </span>
                </div>
              </div>
            </div>

            <div class="kawaii-card">
              <div class="card-header">
                <div class="card-icon danmaku-icon">✨</div>
                <div class="data-info">
                  <div class="data-value">{{ animeData.danmaku }}</div>
                  <div class="data-label">弹幕数</div>
                </div>
                <div class="data-value-right">
                  <span class="data-change">
                    +{{ animeData.danmakuIncrease }}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <div class="secondary-data-row">
            <div class="kawaii-card">
              <div class="card-header">
                <div class="card-icon likes-icon">❤️</div>
                <div class="data-info">
                  <div class="data-value">{{ animeData.likes }}</div>
                  <div class="data-label">获赞数</div>
                </div>
                <div class="data-value-right">
                  <span class="data-change">
                    +{{ animeData.likesIncrease }}
                  </span>
                </div>
              </div>
            </div>

            <div class="kawaii-card">
              <div class="card-header">
                <div class="card-icon coins-icon">🪙</div>
                <div class="data-info">
                  <div class="data-value">{{ animeData.coins }}</div>
                  <div class="data-label">投币数</div>
                </div>
                <div class="data-value-right">
                  <span class="data-change">
                    +{{ animeData.coinsIncrease }}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <div class="chart-section">
            <div class="section-title">
              <span>近期播放趋势</span>
              <div class="chart-tools">
                <div class="tool-icon">📅</div>
                <div class="tool-icon">⚙️</div>
              </div>
            </div>

            <div class="chart-container kawaii-card">
              <div class="empty-chart">
                <div class="chart-y-axis">
                  <div class="y-label">1000</div>
                  <div class="y-label">800</div>
                  <div class="y-label">600</div>
                  <div class="y-label">400</div>
                  <div class="y-label">200</div>
                  <div class="y-label">0</div>
                </div>
                <div class="chart-content anime-chart">
                  <div
                    v-for="(bar, index) in animeData.trendBars"
                    :key="index"
                    class="trend-bar"
                    :style="{ height: bar.height, left: bar.left }"
                  >
                    <div class="trend-tooltip">{{ bar.value }} 播放</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 投稿页面 - 只有当前路径为/front/create/upload时显示 -->
        <div
          class="upload-page kawaii-card"
          v-if="
            currentNav === 'upload' && route.path === '/front/create/upload'
          "
        >
          <div class="upload-area">
            <div class="upload-icon-container">
              <span class="upload-big-icon">📁</span>
            </div>
            <div class="upload-text">将你的动漫创作分享给全世界吧~</div>
            <input
              type="file"
              id="videoFile"
              @change="handleFileSelect"
              style="display: none"
              accept="video/*"
            />
            <label for="videoFile" class="upload-file-btn pulse-animation">
              选择文件
            </label>
          </div>

          <div class="upload-options">
            <div class="video-size-option">
              <span>🎞️ 视频大小限制</span>
              <div class="option-tooltip">
                <p>单个视频最大上传大小为 50MB</p>
                <p>推荐分辨率：1080p</p>
              </div>
            </div>
            <div class="video-format-option">
              <span>📼 支持的格式</span>
              <div class="option-tooltip">
                <p>支持格式：MP4, AVI, MOV, WMV</p>
                <p>推荐格式：MP4</p>
              </div>
            </div>
            <div class="video-code-option">
              <span>🧩 编码建议</span>
              <div class="option-tooltip">
                <p>视频编码：H.264</p>
                <p>音频编码：AAC</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 路由视图 - 用于显示子路由内容 -->
        <router-view
          v-if="
            route.path !== '/front/create' &&
            route.path !== '/front/create/upload'
          "
        ></router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

// 使用路由
const router = useRouter()
const route = useRoute()

// 当前导航
const currentNav = ref('dashboard')

// 页面加载时根据当前路径设置导航状态
onMounted(() => {
  // 根据当前路径设置激活的导航项
  const path = route.path
  if (path.includes('/content')) {
    currentNav.value = 'content'
  } else if (path.includes('/comment')) {
    currentNav.value = 'comment'
  } else if (path.includes('/upload')) {
    currentNav.value = 'upload'
  } else {
    currentNav.value = 'dashboard'
  }

  console.log('创作中心页面加载完成')
})

// 切换导航 - 使用路由跳转
const changeNavTo = (nav: string) => {
  currentNav.value = nav

  // 根据选择的导航项进行路由跳转
  switch (nav) {
    case 'dashboard':
      router.push('/front/create')
      break
    case 'upload':
      router.push('/front/create/upload')
      break
    case 'content':
      router.push('/front/create/content')
      break
    case 'comment':
      router.push('/front/create/comment')
      break
  }
}

// 动漫主题的示例数据
const animeData = ref({
  fans: '2,567',
  fansIncrease: '42',
  plays: '45,789',
  playsIncrease: '582',
  comments: '1,348',
  commentsIncrease: '24',
  danmaku: '3,692',
  danmakuIncrease: '96',
  likes: '8,745',
  likesIncrease: '127',
  coins: '1,245',
  coinsIncrease: '18',
  trendBars: [
    { height: '30%', value: '312', left: '5%' },
    { height: '45%', value: '478', left: '15%' },
    { height: '60%', value: '615', left: '25%' },
    { height: '40%', value: '423', left: '35%' },
    { height: '70%', value: '724', left: '45%' },
    { height: '80%', value: '856', left: '55%' },
    { height: '75%', value: '798', left: '65%' },
    { height: '90%', value: '934', left: '75%' },
    { height: '65%', value: '689', left: '85%' },
    { height: '50%', value: '542', left: '95%' },
  ],
})

// 处理文件选择
const handleFileSelect = (event: Event) => {
  const fileInput = event.target as HTMLInputElement
  const file = fileInput.files?.[0]

  if (file) {
    // 检查是否为视频文件
    if (!file.type.startsWith('video/')) {
      alert('请选择视频文件！')
      fileInput.value = ''
      return
    }

    // 检查文件大小是否超过50MB
    const maxSize = 50 * 1024 * 1024 // 50MB
    if (file.size > maxSize) {
      alert('文件大小不能超过50MB！')
      fileInput.value = ''
      return
    }

    console.log('选择的文件:', file.name)
    // 选择文件后跳转到提交详情页面
    router.push({
      path: '/front/create/upload/detail',
      query: { filename: file.name, filesize: file.size },
    })
  }
}
</script>

<style scoped lang="scss">
.kawaii-create-center {
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 20px;
  overflow: hidden;

  // 背景动画
  .animated-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(135deg, #fce4ec 0%, #f3e5f5 50%, #e8eaf6 100%);
    overflow: hidden;

    .floating-bubble {
      position: absolute;
      background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0) 70%
      );
      border-radius: 50%;
      opacity: 0.3;
      animation: float 15s infinite ease-in-out;

      &:nth-child(1) {
        width: 23px;
        height: 23px;
        left: 7%;
        top: 6%;
        animation-delay: 1s;
        animation-duration: 11s;
      }

      &:nth-child(2) {
        width: 26px;
        height: 26px;
        left: 14%;
        top: 12%;
        animation-delay: 2s;
        animation-duration: 12s;
      }

      &:nth-child(3) {
        width: 29px;
        height: 29px;
        left: 21%;
        top: 18%;
        animation-delay: 3s;
        animation-duration: 13s;
      }

      &:nth-child(4) {
        width: 32px;
        height: 32px;
        left: 28%;
        top: 24%;
        animation-delay: 4s;
        animation-duration: 14s;
      }

      &:nth-child(5) {
        width: 35px;
        height: 35px;
        left: 35%;
        top: 30%;
        animation-delay: 5s;
        animation-duration: 15s;
      }

      &:nth-child(6) {
        width: 38px;
        height: 38px;
        left: 42%;
        top: 36%;
        animation-delay: 6s;
        animation-duration: 16s;
      }

      &:nth-child(7) {
        width: 41px;
        height: 41px;
        left: 49%;
        top: 42%;
        animation-delay: 7s;
        animation-duration: 17s;
      }

      &:nth-child(8) {
        width: 44px;
        height: 44px;
        left: 56%;
        top: 48%;
        animation-delay: 8s;
        animation-duration: 18s;
      }

      &:nth-child(9) {
        width: 47px;
        height: 47px;
        left: 63%;
        top: 54%;
        animation-delay: 9s;
        animation-duration: 19s;
      }

      &:nth-child(10) {
        width: 50px;
        height: 50px;
        left: 70%;
        top: 60%;
        animation-delay: 10s;
        animation-duration: 20s;
      }

      &:nth-child(11) {
        width: 53px;
        height: 53px;
        left: 77%;
        top: 66%;
        animation-delay: 11s;
        animation-duration: 21s;
      }

      &:nth-child(12) {
        width: 56px;
        height: 56px;
        left: 84%;
        top: 72%;
        animation-delay: 12s;
        animation-duration: 22s;
      }

      &:nth-child(13) {
        width: 59px;
        height: 59px;
        left: 91%;
        top: 78%;
        animation-delay: 13s;
        animation-duration: 23s;
      }

      &:nth-child(14) {
        width: 62px;
        height: 62px;
        left: 98%;
        top: 84%;
        animation-delay: 14s;
        animation-duration: 24s;
      }

      &:nth-child(15) {
        width: 65px;
        height: 65px;
        left: 5%;
        top: 90%;
        animation-delay: 15s;
        animation-duration: 25s;
      }
    }
  }

  .kawaii-header {
    text-align: center;
    margin-bottom: 20px;

    .cute-title {
      font-size: 28px;
      font-weight: 700;
      color: #9c27b0;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
      animation: bounce 2s infinite alternate;
    }
  }

  .kawaii-content {
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

    // 导航栏
    .kawaii-nav {
      width: 250px;
      background-color: rgba(255, 255, 255, 0.9);
      padding: 20px 0;
      border-radius: 20px 0 0 20px;

      .nav-section {
        margin-top: 10px;

        .nav-item {
          display: flex;
          align-items: center;
          height: 50px;
          padding: 0 20px;
          cursor: pointer;
          margin-bottom: 10px;
          border-radius: 25px;
          transition: all 0.3s;

          &:hover {
            background-color: #f8bbd0;
            transform: translateX(5px);
          }

          &.active {
            background: linear-gradient(45deg, #ff9e80, #ff80ab);
            color: white;
            box-shadow: 0 4px 8px rgba(255, 128, 171, 0.4);
          }

          .nav-icon {
            font-size: 22px;
            margin-right: 12px;
          }

          .nav-text {
            font-size: 16px;
            font-weight: 500;
          }
        }
      }
    }

    // 主内容区
    .kawaii-main {
      flex: 1;
      background-color: rgba(253, 245, 255, 0.7);
      padding: 20px;
      border-radius: 0 20px 20px 0;

      .kawaii-card {
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 20px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        transition: all 0.3s;

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }
      }

      // 数据概览页面
      .dashboard-page {
        .data-cards {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 15px;
          margin-bottom: 20px;
        }

        .secondary-data-row {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 15px;
          margin-bottom: 20px;
        }

        .card-header {
          display: flex;
          align-items: center;

          .card-icon {
            width: 40px;
            height: 40px;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin-right: 10px;
            background-color: #f3e5f5;
          }

          .data-info {
            flex: 1;

            .data-value {
              font-size: 20px;
              font-weight: 700;
              color: #6a1b9a;
            }

            .data-label {
              font-size: 14px;
              color: #9e9e9e;
            }
          }

          .data-value-right {
            font-size: 14px;
            color: #ff4081;
            font-weight: 500;

            .data-change {
              animation: pulse 2s infinite;
            }
          }
        }

        .chart-section {
          .section-title {
            font-size: 18px;
            font-weight: 600;
            color: #6a1b9a;
            margin-bottom: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .chart-tools {
              display: flex;
              align-items: center;

              .tool-icon {
                font-size: 18px;
                margin-left: 12px;
                cursor: pointer;
                transition: transform 0.3s;

                &:hover {
                  transform: scale(1.2);
                }
              }
            }
          }

          .chart-container {
            height: 300px;
            border-radius: 20px;
            overflow: hidden;

            .empty-chart {
              height: 100%;
              display: flex;
              padding: 20px;

              .chart-y-axis {
                width: 50px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .y-label {
                  font-size: 12px;
                  color: #9499a0;
                }
              }

              .chart-content {
                flex: 1;
                position: relative;

                &.anime-chart {
                  &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background-image: repeating-linear-gradient(
                      to bottom,
                      transparent,
                      transparent 59px,
                      rgba(233, 30, 99, 0.1) 59px,
                      rgba(233, 30, 99, 0.1) 60px
                    );
                  }

                  .trend-bar {
                    position: absolute;
                    bottom: 0;
                    width: 15px;
                    border-radius: 8px 8px 0 0;
                    background: linear-gradient(to top, #ff80ab, #ff4081);
                    transition: all 0.3s;

                    &:hover {
                      transform: scaleY(1.05);
                      background: linear-gradient(to top, #ff80ab, #f50057);

                      .trend-tooltip {
                        opacity: 1;
                        transform: translateY(0);
                      }
                    }

                    .trend-tooltip {
                      position: absolute;
                      top: -25px;
                      left: 50%;
                      transform: translateX(-50%) translateY(10px);
                      background-color: #6a1b9a;
                      color: white;
                      padding: 2px 6px;
                      border-radius: 4px;
                      font-size: 10px;
                      opacity: 0;
                      transition: all 0.3s;
                      white-space: nowrap;

                      &:after {
                        content: '';
                        position: absolute;
                        top: 100%;
                        left: 50%;
                        margin-left: -4px;
                        border-width: 4px;
                        border-style: solid;
                        border-color: #6a1b9a transparent transparent
                          transparent;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      // 投稿页面样式
      .upload-page {
        .upload-area {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 400px;
          border: 3px dashed #e3b6ec;
          border-radius: 20px;
          margin-bottom: 24px;
          background-color: rgba(255, 240, 252, 0.5);
          transition: all 0.3s;

          &:hover {
            border-color: #ba68c8;
            background-color: rgba(255, 240, 252, 0.8);
          }

          .upload-icon-container {
            margin-bottom: 16px;

            .upload-big-icon {
              font-size: 64px;
              display: block;
              animation: float 3s infinite ease-in-out;
            }
          }

          .upload-text {
            font-size: 18px;
            color: #9c27b0;
            margin-bottom: 24px;
            font-weight: 500;
          }

          .upload-file-btn {
            padding: 12px 36px;
            background: linear-gradient(45deg, #ff9e80, #ff80ab);
            color: white;
            border: none;
            border-radius: 30px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 8px rgba(255, 128, 171, 0.4);

            &:hover {
              transform: scale(1.05);
              box-shadow: 0 6px 15px rgba(255, 128, 171, 0.6);
            }

            &.pulse-animation {
              animation: pulse 2s infinite;
            }
          }
        }

        .upload-options {
          display: flex;
          justify-content: space-around;

          .video-size-option,
          .video-format-option,
          .video-code-option {
            position: relative;
            padding: 12px 20px;
            border-radius: 30px;
            background-color: #f3e5f5;
            color: #9c27b0;
            font-size: 14px;
            cursor: pointer;
            margin: 0 8px;
            transition: all 0.3s;

            &:hover {
              background-color: #e1bee7;
              transform: translateY(-3px);

              .option-tooltip {
                display: block;
              }
            }

            .option-tooltip {
              display: none;
              position: absolute;
              bottom: 100%;
              left: 50%;
              transform: translateX(-50%);
              width: 200px;
              background-color: white;
              border: 2px solid #e1bee7;
              border-radius: 12px;
              padding: 12px;
              margin-bottom: 12px;
              z-index: 10;
              box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

              &::after {
                content: '';
                position: absolute;
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
                border-width: 8px;
                border-style: solid;
                border-color: white transparent transparent transparent;
              }

              p {
                margin: 4px 0;
                font-size: 12px;
                color: #9c27b0;
              }
            }
          }
        }
      }
    }
  }
}

// 动画关键帧
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-5px);
  }
}

// 响应式布局
@media screen and (max-width: 1200px) {
  .kawaii-create-center {
    .kawaii-content {
      flex-direction: column;

      .kawaii-nav {
        width: 100%;
        margin-bottom: 20px;
        border-radius: 20px 20px 0 0;

        .nav-section {
          display: flex;
          justify-content: space-around;
          margin-top: 0;

          .nav-item {
            flex-direction: column;
            height: auto;
            padding: 10px;
            text-align: center;

            .nav-icon {
              margin-right: 0;
              margin-bottom: 5px;
            }
          }
        }
      }

      .kawaii-main {
        border-radius: 0 0 20px 20px;

        .dashboard-page {
          .data-cards {
            grid-template-columns: repeat(2, 1fr);
          }

          .secondary-data-row {
            grid-template-columns: repeat(2, 1fr);
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .kawaii-create-center {
    .kawaii-content {
      .kawaii-main {
        .dashboard-page {
          .data-cards,
          .secondary-data-row {
            grid-template-columns: 1fr;
          }
        }
      }
    }
  }
}
</style>
